<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width:100px;
            height:100px;
            border:1px solid red;
            margin-top: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        /**
         * 获取元素的属性值
         * @param ele: dom元素
         * @param attr: 属性
         * 
         */
        function getCss(ele, attr){
            var value;
            if(!"getComputedStyle" in window){// 判断是不是IE678 ,如果是使用currentStyle获取
                value = ele.currentStyle[attr]
            }else{// 如果不是使用getComputedStyle获取
                value = getComputedStyle(ele,null)[attr];
            }
            //
            if(parseFloat(value) === 0) return 0;
            // 如果能够转化为数字，那么返回数字，如果不能转化为数字，那么返回原值。但这种情况有一个特殊的值 0px,所以需要在前面加判断排除这个情况
            return parseFloat(value) || value;
        }
        var oBox= document.getElementById('box');
        var width = getCss(oBox, 'width');
        console.log('width: ', width);
        console.log('border: ' , getCss(oBox, 'border'));
        console.log('marginTop:', getCss(oBox, 'marginTop'));
        console.log('backgroundColor:' , getCss(oBox, 'backgroundColor'));
    </script>
</body>
</html>